<template>




    <el-scrollbar style="height: 100vh;">



       

        


        <img class="sitelogo" src="../../assets/logoko.png"/>
 
        <el-menu 
            :default-active="$route.path"
            router
            :collapse="isCollapse"
            >
        
            <template v-for="route in state.route"  
                :key="route.index">
           
                    <el-sub-menu 
                        v-if="route.childrens && route.childrens.length > 0" 
                            :index="route.to">
                       
                                <template #title>
                                    
                                    <el-icon>
                                        <component :is="route.icon" ></component>
                                       
                                    </el-icon>
                                    <span>{{ route.value }}</span>
                                </template>
                  

                                <template v-for="route in route.childrens"  
                                :key="route.index">
                        
                                    <el-sub-menu 
                                        v-if="route.childrens && route.childrens.length > 0" 
                                            :index="route.to">
                                    
                                                <template #title>
                                                    
                                                    <el-icon>
                                                        <component :is="route.icon" ></component>
                                                    
                                                    </el-icon>
                                                    <span>{{ route.value }}</span>
                                                </template>
                                


                                           <el-menu-item v-for="item, itemIndex in route.childrens" 
                                                :index="item.to" 
                                                :key="itemIndex">
                                            
                                                    <el-icon>
                                                        <component :is="item.icon"></component>
                                                    </el-icon>
                                                
                                                    <span :style="{ 'font-weight': '500' }">{{ item.value }}</span>
                                        
                                        
                                            </el-menu-item> 
                    
                                    </el-sub-menu>
                            

                                    <el-menu-item v-else  
                                        :index="route.to">
                                
                                                <el-icon>
                                                    <component :is="route.icon"></component>
                                                    </el-icon>
                                            <span >{{ route.value }}</span>
                                
                                    </el-menu-item>

                    
                            </template>



      
                    </el-sub-menu>
               

                    <el-menu-item v-else  
                        :index="route.to">
                  
                                <el-icon>
                                    <component :is="route.icon"></component>
                                    </el-icon>
                            <span >{{ route.value }}</span>
                
                    </el-menu-item>

     
            </template>
    </el-menu>
    </el-scrollbar>
    
  </template>
  
  <script setup>
  import { reactive,inject, onMounted  } from 'vue'
  import useStore from '../../store';

  const {isCollapse} = inject('isCollapse')
  
  const permission = useStore().user.userinfo.role
  
  
onMounted(()=>{
  console.log(permission);
  if(permission!='admin'){
    state.route =  [
    {
    icon: "Edit",
    value: "我的待办",
    index: "1",
    to: "/todo",
    childrens: [
      {
        icon: "Menu",
        value: "全部",
        to: "/todo/all",
        index: "1-1",
      },
      {
        icon: "Finished",
        value: "历史项",
        to: "/history",
        index: "1-2",
        childrens: [
          {
            icon: "Connection",
            value: "我参与的",
            to: "/history/myjoin",
            index: "1-2-1",
          },
          {
            icon: "loading",
            value: "进行中",
            to: "/history/doing",
            index: "1-2-2",
          },
          // {
          //   icon: "Bell",
          //   value: "已逾期",
          //   to: "/history/expired",
          //   index: "1-2-4",
          // },
          {
            icon: "Finished",
            value: "已完成",
            to: "/history/finished",
            index: "1-2-3",
          },
        ],
      },
    ],
  },
  {
    icon: "Compass",
    value: "OA",
    to: "/OA",
    index: "2",
    childrens: [
      {
        icon: "Notification",
        value: "公告",
        to: "/OA/notice",
        index: "2-1",
      },
      {
        icon: "WindPower",
        value: "请假申请",
        to: "/OA/leave",
        index: "2-2",
      },
    ],
  },
  {
    icon: "Odometer",
    value: "数据统计",
    to: "/dashboard",
    index: "5",
  },
                {
                    icon: "Setting",
                    value: "设置",
                    to: "/setting",
                    index:'7'
                },
                {
                    icon: "Warning",
                    value: "关于",
                    to: "/about",
                    index:'8'
                },
                
                {
                    icon:"EditPen",
                    value:"个人中心",
                    to:'/userinfo',
                    index:'9'
                }
            ]
  }
})

  const state = reactive({
    route: [
    {
    icon: "Edit",
    value: "我的待办",
    index: "1",
    to: "/todo",
    childrens: [
      {
        icon: "Menu",
        value: "全部",
        to: "/todo/all",
        index: "1-1",
      },
      {
        icon: "Finished",
        value: "历史项",
        to: "/history",
        index: "1-2",
        childrens: [
          {
            icon: "Connection",
            value: "我参与的",
            to: "/history/myjoin",
            index: "1-2-1",
          },
          {
            icon: "loading",
            value: "进行中",
            to: "/history/doing",
            index: "1-2-2",
          },
          // {
          //   icon: "Bell",
          //   value: "已逾期",
          //   to: "/history/expired",
          //   index: "1-2-4",
          // },
          {
            icon: "Finished",
            value: "已完成",
            to: "/history/finished",
            index: "1-2-3",
          },
        ],
      },
    ],
  },
  {
    icon: "Compass",
    value: "OA",
    to: "/OA",
    index: "2",
    childrens: [
      {
        icon: "Notification",
        value: "公告",
        to: "/OA/notice",
        index: "2-1",
      },
      {
        icon: "WindPower",
        value: "请假申请",
        to: "/OA/leave",
        index: "2-2",
      },
    ],
  },
  {
    icon: "OfficeBuilding",
    value: "部门",
    to: "/department",
    index: "3",
    childrens: [
      {
        icon: "Files",
        value: "工单申请",
        to: "/department/formapply",
        index: "3-1",
      },
      {
        icon: "Star",
        value: "员工列表",
        to: "/department/stafflist",
        index: "3-2",
      },
      {
        icon: "Guide",
        value: "部门管理",
        to: "/department/departmentlist",
        index: "3-3",
      },
    ],
  },
  {
    icon: "User",
    value: "用户管理",
    to: "/userlist",
    index: "4",
  },
  {
    icon: "Odometer",
    value: "数据统计",
    to: "/dashboard",
    index: "5",
  },
  {
    icon: "Message",
    value: "飞书",
    to: "/sendmsg",
    index: "6",
  },
                {
                    icon: "Setting",
                    value: "设置",
                    to: "/setting",
                    index:'7'
                },
                {
                    icon: "Warning",
                    value: "关于",
                    to: "/about",
                    index:'8'
                },
                
                {
                    icon:"EditPen",
                    value:"个人中心",
                    to:'/userinfo',
                    index:'9'
                }
            ]
  }
   )
  

 
  </script>
  
  <style scoped lang="less">

img.sitelogo{
    margin: 40px auto;
    object-fit: cover;
    display: flex;
    width: 40%;
    height: 40%;
    border-radius: 4px;
    clip-path: inset(10% 10% 10% 10%);
}
.el-menu{
   
    border: 0;
    width: 100%;
   
    .el-sub-menu{
        font-weight: 560;
        .el-sub-menu__title{



            span{
               
                font-size:1rem;
            }
        }

        .el-menu-item{
       
       span{
           font-weight: 500;
           font-size:1rem;
       }
}

       
    }

    .el-menu-item{
       
            span{
                font-weight: 600;
                font-size:1rem;
            }
    }

            
    

}
.el-menu--collapse{
    
    border-radius: 0;
    :deep(.el-sub-menu){
        
       .el-sub-menu__title{
        padding-right: 20px;

        justify-content: center;
       }
    }
    .el-menu-item{
        justify-content: center;
    }

}

  </style>
  